import echarts from "echarts";
import china from '@/utils/china.json'

export const generateChart = {
  created() {
    let timer = null;
    window.addEventListener("resize", () => {
      clearTimeout(timer);
      timer = null;
      timer = setTimeout(() => {
        this.resize();
      }, 500);
    });
  },

  methods: {
    resize() {
      this.checkListMap.forEach((item) => {
        item.id && item.type != "number" && this["chart" + item.id].resize();
      });
    },
    generateChart(data) {
      this["chart" + data.id] = echarts.init(document.getElementById("chart" + data.id), "walden");
      data.dataOption = data.dataType === 1 ? data.dynamicData : (data.isEdited ? data.staticData : (data.dynamicData ? data.dynamicData : data.staticData))
      let options = {};
      if (data.type === "line") {
        options = {
          animationDuration: 1000,
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: data.dataOption.map((item) => item.name),
            axisLabel: {
              textStyle: {
                color: "#ffffff",
              },
            },
          },
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: '1%',
            right: '10%',
            bottom: '5%',
            top: '10%',
            containLabel: true,
          },
          yAxis: {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#ffffff",
              },
            },
          },
          series: [
            {
              data: data.dataOption.map((item) => item.value),
              type: "line",
              areaStyle: {},
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: "rgba(88,162,231,.2)" // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: "rgba(122,196,250,1)" // 100% 处的颜色
                  }], false)
                }
              },
              smooth: true,
            },
          ],
        };
      } else if (data.type === "pie") {
        if(data.colorType && data.colorType === 2){
          options = {
            tooltip: {
              trigger: 'item'
            },
           
            series: [
              {
                name: data.title,
                type: "pie",
                radius: ['40%', '80%'],
                center: ["50%", "50%"],
                avoidLabelOverlap: false,
                color:['rgb(51,229,249)','rgb(12,195,252)','rgb(9,157,251)','rgb(7,125,249)','rgb(5,93,249)'],
                data: data.dataOption,
              }
            ]
          }
        }else{
          options = {
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            series: [
              {
                name: data.title,
                type: "pie",
                // radius: [10, 70],
                radius: ['10%', '80%'],
                center: ["50%", "50%"],
                color:['rgb(5,93,249)','rgb(7,125,249)','rgb(9,157,251)','rgb(12,195,252)','rgb(51,229,249)'],
                roseType: "area",
                itemStyle: {
                  borderRadius: 5,
                },
                data: data.dataOption,
              },
            ],
          };
        }
        
      } else if (data.type === "bar") {
        
        let itemStyle = {
          barWidth: 8,
          itemStyle: {
            normal: {
              color:(params)=>{
                const colorList = [new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#58EBBD" // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "#7AC4FA" // 100% 处的颜色
                }], false),new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#58A2E7" // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "#7AC4FA" // 100% 处的颜色
                }], false)]
                return colorList[params.dataIndex % 2]
              }
            }
          }
        }
        let xAxisStyle = {}
        let yAxisStyle = {}
        
        if(data.colorType === 2){
          itemStyle = {
            barWidth:20,
            itemStyle: {
              normal: {
                barBorderRadius:[20,20, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 1,
                  color: "rgba(49,219,242,1)" // 0% 处的颜色
                }, {
                  offset: 0,
                  color: "rgba(49,219,242,.2)" // 100% 处的颜色
                }], false)
              }
            }
          }
          yAxisStyle = {
            axisLine:{       
              show:false
            },
            splitLine:{
              show:true,
                lineStyle:{
                    type:'dashed',
                    color:'rgba(49,219,242,.2)'
              }
            }
          }
          xAxisStyle = {
            axisLine:{       
              show:false
            }
          }
        }else if(data.colorType === 3){
          data.dataOption.sort((a,b)=>{
            return (b.value ? b.value : 0) - (a.value ? a.value  : 0)
          })
          itemStyle = {
            barWidth:8,
            itemStyle: {
              normal: {
                // label: {
								// 	show: true, //开启显示
								// 	position: 'top', //在上方显示
								// 	textStyle: { //数值样式
								// 		color: '#fff',
								// 		fontSize: 10
								// 	}
								// },
                barBorderRadius:[20,20, 0, 0],
                color:(params)=>{
                  const colorList = [new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 1,
                    color: "rgb(252,254,233)" // 0% 处的颜色
                  }, {
                    offset: 0,
                    color: "rgb(113,230,181)" // 100% 处的颜色
                  }], false),new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 1,
                    color: "rgb(248,254,255)" // 0% 处的颜色
                  }, {
                    offset: 0,
                    color: "rgb(21,236,239)" // 100% 处的颜色
                  }], false)]
                  return colorList[params.dataIndex % 2]
                }
              }
            }
          }
          yAxisStyle = {
            axisLine:{       
              show:false
            },
            axisLabel:{
              show:false
            }
          }

        }else if(data.colorType === 5){
          data.dataOption.sort((a,b)=>{
            return (a.value ? a.value : 0) - (b.value ? b.value  : 0)
          })
          itemStyle = {
            barWidth:8,
            itemStyle: {
              normal: {
                label: {
									show: true, //开启显示
									position: 'right', //在上方显示
									textStyle: { //数值样式
										color: '#fff',
										fontSize: 10
									}
								},
                barBorderRadius:[0,20, 20, 0],
                color:(params)=>{
                  const colorList = [new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: "rgb(22,198,247)" // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: "rgb(16,254,237)" // 100% 处的颜色
                  }], false),new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: "rgb(164,230,142)" // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: "rgb(185,232,136)" // 100% 处的颜色
                  }], false),new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: "rgb(19,126,244)" // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: "rgb(12,185,251)" // 100% 处的颜色
                  }], false),new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 1,
                    color: "rgb(21,169,246)" // 0% 处的颜色
                  }, {
                    offset: 0,
                    color: "rgb(16,234,253)" // 100% 处的颜色
                  }], false)] 
                  const index = ((data.dataOption.length - 1) - params.dataIndex)
                  return colorList[ index >= 4 ? 3 :  index] 
                }
              }
            }
          }
          xAxisStyle = {
            type:'value',
            axisLine:{       
              show:false
            },
            axisLabel:{
              show:false
            }
          }
          yAxisStyle = {
            type:'category',
            axisLine:{       
              show:false
            },
            data:data.dataOption.map(item=>item.name),
          }
        }
        options = {
          xAxis: {
            type: "category",
            data: data.dataOption.map((item) => item.name),
            axisLabel: {
              textStyle: {
                color: "#ffffff",
              }
            },
            ...xAxisStyle
          },
          yAxis: {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#ffffff",
              },
            },
            ...yAxisStyle
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: '5%',
            right: '5%',
            bottom: '10%',
            top: '10%',
            containLabel: true,
          },
          series: [
            {
              data: data.dataOption.map((item) => parseInt(item.value)),
              type: "bar",
              ...itemStyle,
            },
          ],
        }
        // if(data.colorType === 4){
        //   options = {
        //     angleAxis: {
        //       max: 100,
        //       startAngle:90,
        //       show:false,
        //       handle:{size:50,show:true},
        //       splitLine: {
        //           show: false
        //       }
        //   },
        //   tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //       type: 'shadow'
        //     },
        //     formatter:(params)=>{
        //       return params[0].axisValueLabel + "  " + params[0].value + '%'
        //     }
        //   },
        //   radiusAxis: {
        //       type: 'category',
        //       show:false,
        //       splitLine: {
        //           show: false
        //       },
        //       name:'111',
        //       data: data.dataOption.map(item=>item.name),
        //   },
        //   polar: {
        //       tooltip:{show:true},
        //       radius:['10','90%']
        //   },
        //   series: [{
        //       type: 'bar',
        //       stack:'one',
        //       data: data.dataOption.map((item) => parseInt(item.value)),
        //       roundCap: false,
        //        zlevel:2,
        //       coordinateSystem: 'polar',
        //       barWidth:7,
        //       // barGap:'50%',
        //       label:{
        //         show:true
        //       },
        //       labelLine:{
        //         show:true
        //       },
        //       itemStyle: {
        //           normal: {
        //             color:(params)=>{
        //               const colorList = [new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
        //                 offset: 0,
        //                 color: "#58A2E7" // 0% 处的颜色
        //               }, {
        //                 offset: 1,
        //                 color: "#7AC4FA" // 100% 处的颜色
        //               }], false),new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
        //                 offset: 0,
        //                 color: "rgb(15,192,236)" // 0% 处的颜色
        //               }, {
        //                 offset: 1,
        //                 color: "rgb(12,165,234)" // 100% 处的颜色
        //               }], false),new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
        //                 offset: 0,
        //                 color: "rgb(105,224,212)" // 0% 处的颜色
        //               }, {
        //                 offset: 1,
        //                 color: "rgb(110,232,175)" // 100% 处的颜色
        //               }], false),new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
        //                 offset: 0,
        //                 color: "rgb(99,255,157)" // 0% 处的颜色
        //               }, {
        //                 offset: 1,
        //                 color: "rgb(146,255,143)" // 100% 处的颜色
        //               }], false),new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
        //                 offset: 0,
        //                 color: "rgb(86,131,250)" // 0% 处的颜色
        //               }, {
        //                 offset: 1,
        //                 color: "rgb(41,195,250)" // 100% 处的颜色
        //               }], false)]
        //               return colorList[params.dataIndex % 5]
        //             }
        //           }
        //         }
        //   }, {
        //       type: 'bar',
        //       stack:'one',
        //       roundCap:true,
        //       zlevel:1,
        //       data:new Array(data.dataOption.length).fill(100),
        //       coordinateSystem: 'polar',
        //       color: 'rgba(19,89,120)'
        //   }],
        //   }
        // }
      } else if (data.type === 'map') {
        options = {
          geo: {
            map: 'china',
            zoom: 1.2,
            emphasis: {
              itemStyle: {
                color: '#fbc127', //地图背景色
                borderColor: '#516a89', //省市边界线00fcff 516a89
                borderWidth: 1,
              },
              label: {
                color: '#fff',
                fontSize:'18px'
              }

            },
            roam: false, //是否允许缩放
            itemStyle: {
              normal: {
                borderColor: '#7AC4FA', //省市边界线00fcff 516a89
                borderWidth: 1,
                areaColor:'#516a89'
              },

            }
          },
          series:[
            //  所在地圆环
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              rippleEffect: { //涟漪特效
                period: 10, //动画时间，值越小速度越快
                brushType: 'stroke', //波纹绘制方式 stroke, fill
                scale: 4 //波纹圆环最大限制，值越大波纹越大
              },
              symbolSize: function (val) {
                return 10;
              },
              label: {
                normal: {
                  show: false,
                  position: 'right', //显示位置
                  offset: [5, 0], //偏移设置
                  formatter: function(params) { //圆环显示文字
                    return params.data.name;
                  },
                  fontSize: 16
                },
                emphasis: {
                  show: true,
                  color:'#fff',
                }
              },
              itemStyle: {
                normal: {
                  show: false,
                  color: '#1e90ff'
                }
              },
              data:data.dataOption.map(item=>{
                return{
                  name:item.name,
                  value:[...(item.value.split(',')),1]
                }
              })
            },
          ]
          
        }
      }
      echarts.registerMap('china', china)
      this["chart" + data.id].setOption(options);
    }
  }
}